<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        @change="selectPosiType"
        v-model="city"
        :options="option1"
        title="城市"
      />
      <van-dropdown-item
        @change="selectPosiType"
        v-model="experience"
        :options="option2"
        title="经验"
      />
      <van-dropdown-item
        @change="selectPosiType"
        v-model="salary"
        :options="option3"
        title="薪资"
      />
    </van-dropdown-menu>
    <!-- <button @click="formatData">1111</button> -->
  </div>
</template>

<script>
export default {
  props: ['jobOptions'],
  watch: {
    jobOptions (v) {
      this.option1 = ['全部', ...v.cityFilters].map(item => {
        return {
          text: item,
          value: item
        }
      })
      this.option2 = ['全部', ...v.experienceFilters].map(item => {
        return {
          text: item,
          value: item
        }
      })
      this.option3 = ['全部', ...v.salaryFilters].map(item => {
        return {
          text: item,
          value: item
        }
      })
    }
  },
  data () {
    return {
      // 筛选内容
      city: '', // 城市
      experience: '', // 经验
      salary: '', // 待遇
      option1: [],
      option2: [],
      option3: [],
      finalOption: {}
    }
  },
  methods: {
    selectPosiType () {
      const city = this.city === '全部' || this.city === '' ? undefined : this.city
      const experience = this.experience === '全部' || this.experience === '' ? undefined : this.experience
      const salary = this.salary === '全部' || this.salary === '' ? undefined : this.salary
      this.finalOption = {
        city: city,
        experience: experience,
        salary: salary
      }
      this.$emit('getfinalOption', this.finalOption)
      this.$emit('submitOptions')
      console.log(this.finalOption)
    }
  }
}
</script>

<style></style>
